@import "head";

@font-face {
  font-family: 'Alibaba PuHuiTi Medium';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_t486xn857d.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_t486xn857d.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_t486xn857d.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_t486xn857d.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/webfont_t486xn857d.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_t486xn857d.svg#AlibabaPuHuiTiM') format('svg'); /* iOS 4.1- */
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Alibaba PuHuiTi Medium", "Microsoft YaHei", "微软雅黑";
}

.bz-container {
  height: 1080px;
  width: 1920px;
  overflow: hidden;
  background: url("../../assets/images/hxdp/bg.png") no-repeat;
}

.bz-cerebro {
  display: flex;
  justify-content: center;
  height: 50px;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 50px;
  font-weight: 600;
  margin: 16px auto 14px auto;
}

.bz-tb {
  display: flex;
  justify-content: flex-start;
  height: 38px;

  .bz-icon {
    height: 38px;
    width: 38px;
    margin-right: 5px;
    display: flex;

    .bz-icon-ring {
      height: 38px;
      width: 38px;
    }

    .bz-icon-bg {
      height: 32px;
      width: 32px;
      margin: 3px 3px 3px -35px;
    }
  }

  .bz-title {
    padding-top: 5px;
    height: 27px;
    font-size: 20px;
    color: #92E3FF;
    line-height: 27px;
  }
}

.bz-content-box {
  display: flex;

  .bz-box-left {
    width: 602px;
    height: inherit;
    margin-left: 58px;

    .bz-title-bar {
      .bz-tb();
    }

    .bz-card {
      height: 484px;
      width: inherit;
      padding: 14px 25px;
      background: url("../../assets/images/hxdp/img_neirong_kuang.svg") no-repeat;

      .bz-card-body {
        margin-top: 25px;
        margin-left: 7px;
        display: flex;
        justify-content: flex-start;

        .bz-tab {
          width: 32px;
          background: rgba(146, 227, 255, 0.1);
          height: 372px;

          .bz-tab-item {
            width: 32px;
            height: 93px;
            position: relative;
            transition: 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;

            .bz-name {
              width: 14px;
              font-size: 14px;
              color: rgba(146, 227, 255, 0.3);
              line-height: 16px;
              word-break: break-word;
            }

            &:hover {
              cursor: pointer;
            }
          }

          .bz-tab-item:hover, .bz-active {
            background: rgba(146, 227, 255, 0.3);

            .bz-name {
              color: #92E3FF
            }


            &::before, &::after {
              position: absolute;
              top: 0;
              left: 0;
              width: 8px;
              height: 8px;
              content: '';
              background: url("../../assets/images/hxdp/zhijiao1.svg");
            }

            &::after {
              top: auto;
              left: auto;
              bottom: 0;
              right: 0;
              .bz-rotation-180();
            }
          }
        }

        .bz-chart {
          background-color: #42b9831f;
        }

        .bz-chart, .bz-chart-group {
          .bz-wh(530px, 372px);
          padding-left: 10px;
        }

        .bz-chart-group {
          .bz-chart-lg {
            height: 238px;
            width: 510px;
            display: flex;
            justify-content: flex-start;

            .bz-chart-pie {
              background-color: #42b9831f;
              .bz-wh(238px, 238px);
            }

            .bz-ring {
              .bz-wh(238px, 238px);
              margin-left: -238px;
            }

            .bz-ring-1 {
              background: url("../../assets/images/hxdp/pie_ring_1.svg");
            }

            .bz-ring-2 {
              background: url("../../assets/images/hxdp/pie_ring_2.svg");
              .bz-rotation-reverse-infinity();
            }

            .bz-ring-3 {
              background: url("../../assets/images/hxdp/pie_ring_3.svg");
            }

            .bz-ring-4 {
              background: url("../../assets/images/hxdp/pie_ring_4.svg");
              .bz-rotation-infinity();
            }

            .bz-list-panel {
              margin-left: 22px;
              margin-top: 2px;
              width: 226px;

              .bz-tab-sm {
                height: 32px;
                width: 226px;
                border-top: 1px solid #92E3FF;
                border-bottom: 1px solid #92E3FF;
                border-left: 1px solid #92E3FF;
                display: flex;
                justify-content: flex-start;
                margin-bottom: 36px;

                .bz-tab-sm-item {
                  width: 75px;
                  height: 30px;
                  border-right: 1px solid #92E3FF;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: 0.3s;

                  &:hover {
                    cursor: pointer;
                  }

                  .bz-name {
                    height: 20px;
                    font-size: 14px;
                    color: #92E3FF;
                    line-height: 20px;
                  }
                }

                .bz-tab-sm-item:hover, .bz-active {
                  background: #92E3FF;

                  .bz-name {
                    color: #001732;
                  }
                }
              }

              .bz-sm-list {
                ul {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  width: 226px;

                  li {
                    height: 40px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-left: 15px;
                    padding-right: 15px;

                    &:nth-child(odd) {
                      background: rgba(0, 122, 223, 0.15);
                    }

                    .bz-name-group {
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;

                      .bz-icon {
                        width: 8px;
                        height: 8px;
                        margin-right: 10px;
                      }

                      .bz-icon-1 {
                        border: 2px solid #0CAEFF;
                      }

                      .bz-icon-2 {
                        border: 2px solid #6D52FF;
                      }

                      .bz-icon-3 {
                        border: 2px solid #FF608B;
                      }

                      .bz-icon-4 {
                        border: 2px solid #4CECDC;
                      }

                      .bz-name {
                        height: 20px;
                        font-size: 14px;
                        color: #92E3FF;
                        line-height: 20px;
                      }
                    }

                    .bz-value {
                      height: 20px;
                      font-size: 14px;
                      color: #92E3FF;
                      line-height: 20px;
                    }
                  }
                }
              }
            }
          }

          .bz-chart-sm {
            height: 100px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 13px;
            padding-left: 18px;

            .bz-chart-pie-sm {
              width: 100px;
              height: 100px;
              margin-right: 22px;
              background-color: #42b9831f;
            }
          }
        }
      }

      .bz-card-foot {
        height: 17px;
        display: flex;
        justify-content: flex-end;

        .bz-data-date {
          height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #005BA7;
          line-height: 17px;
        }
      }
    }

    .bz-card-top {
    }

    .bz-card-bottom {
      margin-top: 4px;

      .bz-tab-item {
        width: 32px;
        height: 186px !important;
        position: relative;
      }
    }
  }

  .bz-box-center {
    width: 790px;
    height: inherit;

    .bz-kedu {
      width: 663px;
      height: 20px;
      margin-top: 53px;
      margin-left: 63px;
    }

    .bz-chcar-3dbar {
      width: 744px;
      height: 437px;
      margin-top: 29px;
      margin-left: 14px;
      background-color: #42b9831f;
    }

    .bz-box-bottom {
      width: inherit;
      margin-top: 27px;
      padding-bottom: 23px;
      height: 434px;
      padding-left: 64px;
      position: relative;

      .bz-total-box {
        height: 165px;
        width: 660px;
        display: flex;
        justify-content: space-between;

        .bz-card {
          width: 320px;
          height: inherit;
          display: flex;
          flex-direction: column;

          .bz-split {
            width: 320px;
            height: 0;
            border-bottom: 2px dotted #005BA7;
            margin-bottom: 12px;
          }

          .bz-bg-l {
            background: url("../../assets/images/hxdp/data_bg_1.svg");
          }

          .bz-bg-r {
            background: url("../../assets/images/hxdp/data_bg_2.svg");
          }

          .bz-content {
            width: 320px;
            height: 152px;
            padding-top: 21px;
            padding-left: 30px;

            .bz-li {
              display: flex;
              justify-content: flex-start;
              align-items: flex-end;
              flex-wrap: nowrap;

              .bz-num {
                height: 74px;
                font-size: 54px;
                color: #FFFFFF;
                line-height: 74px;
                text-shadow: 0px 0px 16px rgba(73, 148, 255, 0.5);
                white-space: nowrap;
                font-weight: bold;
              }

              .bz-unit {
                height: 33px;
                font-size: 24px;
                color: #FFFFFF;
                line-height: 33px;
                text-shadow: 0px 0px 16px rgba(73, 148, 255, 0.5);
                margin-bottom: 10px;
                white-space: nowrap;
              }
            }

            .bz-name {
              height: 33px;
              font-size: 24px;
              color: #107FE8;
              line-height: 33px;
              text-align: left;
            }
          }
        }
      }

      .bz-list-box {
        display: flex;
        height: 269px;

        .bz-left-list {
          width: 492px;
          height: 237px;
          margin-top: 25px;
          margin-right: 21px;

          .bz-list-bottom {
            width: inherit;
            height: 107px;
            border-bottom: none !important;
          }

          .bz-split {
            width: 492px;
            height: 0;
            border-bottom: 2px dotted #005BA7;
            margin-bottom: 15px;
          }

          .bz-list-li {
            height: 33px;
            width: 100%;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .bz-dot {
              width: 8px;
              height: 8px;
              border: 2px solid #92E3FF;
              margin-right: 10px;
            }

            .bz-li-content {
              width: calc(100% - 18px);
              display: flex;
              justify-content: space-between;
              align-items: center;

              .bz-title {
                height: 27px;
                font-size: 20px;
                color: #92E3FF;
                line-height: 27px;
              }

              .bz-num {
                height: 33px;
                font-size: 24px;
                color: #92E3FF;
                line-height: 33px;
              }
            }
          }

          .bz-data-mata {
            height: 17px;
            width: inherit;
            margin-top: -4px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bz-dotted {
              width: 340px;
              height: 0;
              border-bottom: 2px dotted #005BA7;
            }

            .bz-data-date {
              height: inherit;
              width: 142px;
              font-size: 12px;
              font-weight: 400;
              color: #005BA7;
              line-height: 17px;
            }
          }
        }

        .bz-right-box {
          margin-top: 18px;
          width: 147px;
          height: 221px;
          background: rgba(0, 122, 223, 0.15);
          padding-top: 20px;
          display: flex;

          .bz-dotted {
            width: 0;
            height: 181px;
            border-right: 1px dotted #005BA7;
            margin-left: 15px;
          }

          .bz-chart-random {
            margin-left: 35px;
            width: 81px;
            height: 180px;
            background: rgba(16, 127, 232, 0.3);
          }
        }
      }

      .bz-decor-l {
        .bz-wh(24px, 56px);
        background: url("../../assets/images/hxdp/decor_l.svg");
        position: absolute;
        left: 8px;
        bottom: 31px;
      }

      .bz-decor-r {
        .bz-wh(8px, 390px);
        background: url("../../assets/images/hxdp/decor_r.svg");
        position: absolute;
        right: 8px;
        bottom: 31px;
      }
    }
  }

  .bz-box-right {
    width: 412px;
    height: 971px;
    background: url("../../assets/images/hxdp/img_xinxikuang_1.svg") no-repeat;
    padding-top: 14px;
    padding-left: 25px;

    .bz-title-bar {
      .bz-tb();
      margin-bottom: 38px;
    }

    .bz-card {
      padding-left: 6px;
      padding-right: 32px;
      height: 435px;

      .bz-card-head {
        height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .bz-title {
          height: 25px;
          font-size: 18px;
          color: #92E3FF;
          line-height: 25px;
          white-space: nowrap;
        }

        .bz-split {
          margin-left: 10px;
          width: 268px;
          height: 0;
          border-bottom: 2px solid #005BA7;
        }
      }

      .bz-card-body {
        height: 400px;
        overflow: hidden;

        .bz-list-group {
          margin-top: 10px;
          margin-left: 1px;
          margin-bottom: 0;
          list-style: none;
          padding: 0;

          .bz-li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 15px;
            height: 36px;

            .bz-title-group {
              height: 20px;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .bz-dotted {
                .bz-wh(3px, 3px);
                background: #92E3FF;
                margin-right: 7px;
              }

              .bz-title {
                height: 20px;
                font-size: 14px;
                color: #92E3FF;
                line-height: 20px;

              }
            }
          }

          .bz-li-odd {
            background: rgba(0, 122, 223, 0.15);
          }
        }
      }
    }
  }
}

.bz-tooltip-1 {
  display: inline-block;
  top: 100px;
  left: 100px;
  width: 240px;
  height: 182px;
  background: linear-gradient(134deg, #4867FE 0%, #00235A 100%);
  opacity: 0.9;
  border: 1px solid #91E3FF;
  border-radius: 5px;
  padding: 15px;

  .bz-tp-title {
    height: 27px;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 27px;
    margin-bottom: 5px;
  }

  .bz-item {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bz-name {
      height: 20px;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 20px;
    }

    .bz-value {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }
  }
}
